<script setup lang="ts">
import { ref, onMounted } from "vue"
import axios from "axios" //导入 axios 库
//所有商品
const goods = ref()
async function getData(){
    const res = await axios.get("/home/goods/list")
    console.log(res.data)
    goods.value = res.data.data
}
//页面组件加载完成
onMounted(()=>{
    getData()
})
</script>
<template>
<section class="tb">
<div class="title">
<div>商品编号</div>
<div>商品名称</div>
<div>商品价格</div>
<div>商品库存</div>
<div>商品图片</div>
</div>
<div v-for="item in goods">
    <div>{{ item.id }}</div>
    <div>{{ item.name }}</div>
    <div>{{ item.price }}</div>
    <div>{{ item.stock }}</div>
<div><img :src="item.picture"></div>
</div>
</section>
</template>
<style scoped>
.tb{
width:550px;
border:1px solid lightgray;
margin:0px auto;
font-size:13px;
}
.tb .title{
font-weight: bold;
}
.tb > div{
display: flex;
}
.tb > div:not(:last-child){
border-bottom:1px solid lightgray;
}
.tb > div > div{
height:60px;
display:flex;
justify-content: center;
align-items: center;
}
.tb > div > div:not(:last-child){
border-right:1px solid lightgray;
}
.tb > div > div:nth-child(1), .tb > div > div:nth-child(3), .tb > div > div:nth-child(4){
width:80px;
}
.tb > div > div:nth-child(2), .tb > div > div:nth-child(5){
width:150px;
}
.tb > div > div img{
width:50px;
} </style>